<template>
  <!--底部轮播-->
    	   <div class="fotnav">
    	   	<div class="fot_h"  @mouseover="stop" @mouseout="play">
    	  <!-- 	<div class="fot_left" @click="prev"><img src="../assets/pcpro/lun_03.jpg" alt="" /></div>-->
    	   	<div class="fot_content" :class="{wrapper_trans:isTrans}" :style="{width:originalData.img_width*(originalData.num+2)+'px',height:originalData.img_height+'px',left:-originalData.img_width+'px'}" ref="wrapperContent">
    	   		  <ul>
    	   		  	<li class="list_fot" >
    	   		  		<img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
    	   		  	</li>
    	   		  	<li class="list_fot" ><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/></li>
    	   		  	<li class="list_fot" ><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}" /></li>
    	   		  	<li class="list_fot" ><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/></li>
    	   		  	<li class="list_fot"><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/></li>
    	   		  	<li class="list_fot"><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/></li>
    	   		  <li class="list_fot"><img src="" alt="" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/></li>
    	   		  
    	   		  </ul>
    	   	</div>
    	
    	   <!--	<div class="fot_right"  @click="next"><img src="../assets/pcpro/lun_05.jpg" alt="" /></div>-->
    	   	</div>
    	   	<div class="fot_list" :style="{left:(originalData.img_width-100)/2+'px'}">
    	   		 <span :class="['wrapper-button',{'wrapper_on':index==1}]"  @click="turnTo(1)"></span>
                <span :class="['wrapper-button',{'wrapper_on':index==2}]"  @click="turnTo(2)"></span>
                <span :class="['wrapper-button',{'wrapper_on':index==3}]"  @click="turnTo(3)"></span>
                <span :class="['wrapper-button',{'wrapper_on':index==4}]"  @click="turnTo(4)"></span>
    	   	</div>
    	   	 <a href="javascript:;" class="wrapper-arrow wrapper-prev" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="prev">&lt;</a>
            <a href="javascript:;" class="wrapper-arrow wrapper-next" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="next">&gt;</a>
    	   </div>
</template>

<script>
	export default{
		name:'fotlunbo',
		data(){
			return{
				originalData:{
                    img_width:190,
                    img_height:190,
                    btn_width:14,
                    btn_height:15,
                    num:4,
                    delay:300
                },
                isTrans:true,//因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition
                index:1,
                timer:null,//setInterval
                clickdelay:false//用来防止连续点击
			}
		},
		 methods:{
                next(){
                    if(this.clickdelay){
                        return 
                    }
                    this.clickdelay=true
                    if(this.index==this.originalData.num){
                        this.index=1
                    }else{

                        this.index+=1
                    }
                    this.animate(this.originalData.img_width)

                },
                prev(){
                    if(this.clickdelay){
                        return 
                    }
                    this.clickdelay=true
                    if(this.index==1){
                        this.index=this.originalData.num
                    }else{
                        this.index-=1
                    }
                    this.animate(-this.originalData.img_width)  
                },
                animate(offset){
                    var node=this.$refs.wrapperContent
                    var self=this;
                    var left=parseInt(node.style.left)-offset
                    this.isTrans=true
                    node.style.left=left+'px'
                    setTimeout(function(){
                        if(left<-(self.originalData.num*self.originalData.img_width)){
                            self.isTrans=false
                            node.style.left=-self.originalData.img_width+'px'
                            self.clickdelay=false //当到达最后一张图片时 
                        }
                        if(left>-100){
                            self.isTrans=false
                            node.style.left=-self.originalData.num*self.originalData.img_width+'px'
                            self.clickdelay=false //当到达第一张图片时  
                        }
                    },this.originalData.delay)
                },
                play(){

                    var self=this;
                    this.timer=setInterval(function(){
                        self.next()
                    },2000)
                },
                stop(){
                    this.clickdelay=false//用来防止连续点击
                    clearInterval(this.timer)
                    this.timer=null
                },
                turnTo(flag){
                    if(flag==this.index){
                        return
                    }else{
                        var offset=(flag-this.index)*this.originalData.img_width
                        this.index=flag
                        this.animate(offset)
                    }

                }
            },
             mounted(){
                /*下面是判断过渡动画是否完成*/ 
                var node=this.$refs.wrapperContent
                var transitions = {
                     'transition':'transitionend',
                     'OTransition':'oTransitionEnd',
                     'MozTransition':'transitionend',
                     'WebkitTransition':'webkitTransitionEnd'
                    }
                    var self=this

               for(var t in transitions){

                   if( node.style[t] !== undefined ){
                       var transitionEvent=transitions[t];
                   }
               }
               transitionEvent && node.addEventListener(transitionEvent, function() {
                    self.clickdelay=false              
               });
               this.play()
            }

	}
</script>

<style>
	     .wrapper{position: relative;overflow: hidden;}
            .wrapper-content{}
            .wrapper-content_img{border: none;outline:none;float: left}
            .wrapper-buttons{position: absolute;width: 100px;height: 20px;text-align: center;bottom: 3px;z-index: 2;}
            .wrapper-button{float: left;width: 15px;height: 15px;border:1px solid #DAD8D8;border-radius: 10px;background: #ffffff;margin: 0 2.5px;cursor: pointer;}
            .wrapper-arrow{position: absolute;width: 30px;height:52px;cursor: pointer;background-color: #ffb606; color: #fff;top:50%;
            line-height: 42px;font-size: 36px;text-align: center;z-index: 2;border-radius: 12px;}
            .wrapper:hover .wrapper-arrow{display: block;background-color: rgba(0,0,0,.7);}
            .wrapper-prev{left:10px;}
            .wrapper-next{right:10px;}
            .wrapper_on{background-color: #ffb606;}
            .wrapper_trans{transition: left .3s ease}
           .fot_left{display: inline-block;margin-left:10px;position: relative;top:-60px;cursor: pointer;}
           a{text-decoration: none;}
    .fot_right{display: inline-block;margin-left:10px;position: relative;top:-60px;cursor: pointer;}
    .fot_left img{width:30px;height:52px;display: inline-block;}
    .fot_left img{width:30px;height:52px;display: inline-block;}
    .fot_h{margin-bottom: 20px;display: inline-block;overflow: hidden;position: relative;}
</style>